import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { 
  ScatterChart, 
  Scatter, 
  XAxis, 
  YAxis, 
  ZAxis, 
  CartesianGrid, 
  Tooltip, 
  Legend,
  ResponsiveContainer 
} from 'recharts';

const PanelContainer = styled.div`
  height: 300px;
  background: rgba(10, 25, 41, 0.7);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 5px;
  padding: 15px;
  position: relative;
  overflow: hidden;
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.8), transparent);
  }
  
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8));
  }
`;

const PanelHeader = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  position: relative;
  
  &:after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.5), transparent);
  }
`;

const PanelTitle = styled.div`
  font-size: 18px;
  font-weight: bold;
  color: #fff;
`;

const CustomTooltip = styled.div`
  background: rgba(10, 25, 41, 0.9);
  border: 1px solid rgba(0, 255, 255, 0.5);
  border-radius: 4px;
  padding: 8px;
  color: #fff;
  font-size: 12px;
`;

interface ScatterPlotPanelProps {
  title?: string;
}

const ScatterPlotPanel: React.FC<ScatterPlotPanelProps> = ({ title = "数据分布" }) => {
  const [data, setData] = useState(() => {
    const result = [];
    for (let i = 0; i < 20; i++) {
      result.push({
        x: Math.floor(Math.random() * 100),
        y: Math.floor(Math.random() * 100),
        z: Math.floor(Math.random() * 500) + 100,
        name: `数据点 ${i + 1}`
      });
    }
    return [
      { name: '组A', data: result.slice(0, 10) },
      { name: '组B', data: result.slice(10) }
    ];
  });
  
  // 模拟数据更新
  useEffect(() => {
    const timer = setInterval(() => {
      setData(prevData => {
        return prevData.map(group => ({
          ...group,
          data: group.data.map(point => ({
            ...point,
            x: Math.max(0, Math.min(100, point.x + Math.floor(Math.random() * 10) - 5)),
            y: Math.max(0, Math.min(100, point.y + Math.floor(Math.random() * 10) - 5)),
            z: Math.max(100, Math.min(600, point.z + Math.floor(Math.random() * 50) - 25))
          }))
        }));
      });
    }, 3000);
    
    return () => clearInterval(timer);
  }, []);
  
  const renderCustomTooltip = ({ active, payload }: any) => {
    if (active && payload && payload.length) {
      const data = payload[0].payload;
      return (
        <CustomTooltip>
          <p>{`${data.name}`}</p>
          <p>{`X: ${data.x}`}</p>
          <p>{`Y: ${data.y}`}</p>
          <p>{`大小: ${data.z}`}</p>
        </CustomTooltip>
      );
    }
    return null;
  };

  return (
    <PanelContainer>
      <PanelHeader>
        <PanelTitle>{title}</PanelTitle>
      </PanelHeader>
      <ResponsiveContainer width="100%" height="90%">
        <ScatterChart
          margin={{ top: 10, right: 10, bottom: 20, left: 10 }}
        >
          <CartesianGrid strokeDasharray="3 3" stroke="rgba(0, 255, 255, 0.2)" />
          <XAxis 
            type="number" 
            dataKey="x" 
            name="X轴" 
            stroke="#00ffff" 
            fontSize={11}
            tickCount={6}
            domain={[0, 100]}
          />
          <YAxis 
            type="number" 
            dataKey="y" 
            name="Y轴" 
            stroke="#00ffff" 
            fontSize={11}
            tickCount={6}
            domain={[0, 100]}
          />
          <ZAxis 
            type="number" 
            dataKey="z" 
            range={[50, 350]} 
            name="大小" 
          />
          <Tooltip cursor={{ strokeDasharray: '3 3' }} content={renderCustomTooltip} />
          <Legend wrapperStyle={{ color: '#fff', fontSize: '11px' }} />
          <Scatter name="组A" data={data[0].data} fill="#8884d8" />
          <Scatter name="组B" data={data[1].data} fill="#82ca9d" />
        </ScatterChart>
      </ResponsiveContainer>
    </PanelContainer>
  );
};

export default ScatterPlotPanel; 